<template>
  <tinymce-vue v-model="contentHtml" tag-name="div" :init="settings" ></tinymce-vue> 
</template>

<script>
  import tinymce from 'tinymce/tinymce'
  import TinymceVue from '@tinymce/tinymce-vue'
  import 'tinymce/themes/silver/theme'
  import "tinymce/icons/default"; // 引用图标文件
  import "tinymce/plugins/link";
  import "tinymce/plugins/code";
  import "tinymce/plugins/table";
  import "tinymce/plugins/lists";
  import "tinymce/plugins/advlist";
  import "tinymce/plugins/anchor";
  import "tinymce/plugins/autolink"; //锚点
  import "tinymce/plugins/autoresize";
  import "tinymce/plugins/autosave";
  import "tinymce/plugins/charmap"; //特殊字符
  import "tinymce/plugins/code"; //查看源码
  import "tinymce/plugins/codesample"; //插入代码
  import "tinymce/plugins/directionality"; //
  import "tinymce/plugins/fullpage"; //页面属性编辑
  import "tinymce/plugins/fullscreen"; //全屏
  import "tinymce/plugins/help"; //帮助
  import "tinymce/plugins/hr"; //横线
  import "tinymce/plugins/image"; //图片
  import "tinymce/plugins/imagetools"; //图片工具
  import "tinymce/plugins/importcss"; //图片工具
  import "tinymce/plugins/insertdatetime"; //时间插入
  import "tinymce/plugins/media"; //媒体插入
  import "tinymce/plugins/nonbreaking"; //
  import "tinymce/plugins/noneditable"; //不间断空格
  import "tinymce/plugins/pagebreak"; //分页
  import "tinymce/plugins/paste"; //粘贴
  import "tinymce/plugins/preview"; //预览
  import "tinymce/plugins/print"; //打印
  import "tinymce/plugins/quickbars"; //快捷菜单
  import "tinymce/plugins/save"; //保存
  import "tinymce/plugins/searchreplace"; //查询替换
  import "tinymce/plugins/spellchecker"; //拼写检查
  import "tinymce/plugins/tabfocus"; //
  import "tinymce/plugins/template"; //插入模板
  import "tinymce/plugins/textpattern"; //
  import "tinymce/plugins/toc"; //
  import "tinymce/plugins/visualblocks"; //
  import "tinymce/plugins/visualchars"; //
  import "tinymce/plugins/wordcount"; //数字统计

  import { uploadFileAPI } from '@/api/file.js'

  export default {
    props: {
      content: String,
    },
    components: {
      TinymceVue,
    },
    data() {
      return {
        contentHtml: this.content,
        updateTimer: null, //防抖
        settings: {
          selector: '#myTextarea',
          language_url: '/tinymce/langs/zh_CN.js', //语言包的路径
          language: 'zh_CN', //语言
          skin_url: '/tinymce/skins/ui/oxide', //skin路径
          content_css: "/tinymce/content.css",
          // height: 200, //编辑器高度
          branding: false, //是否禁用“Powered by TinyMCE”
          menubar: false, //顶部菜单栏显示
          elementpath: false,
          resize: false, // 禁止改变大小
          statusbar: false, // 隐藏底部状态栏
          toolbar_mode: "none",
          // 根据需要选用，插件需要import进来
          plugins: "code image media table hr link lists advlist",
          //"wordcount visualchars visualblocks toc textpattern template tabfocus spellchecker searchreplace save
          //quickbars print preview paste pagebreak noneditable nonbreaking media insertdatetime importcss
          //imagetools image hr help fullscreen fullpage directionality codesample code charmap link code table lists advlist anchor
          //autolink autoresize autosave", // 插件需要import进来

          // 根据需要选用
          toolbar: "code | undo redo | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table hr | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |",
          //toolbar: "undo redo fontsizeselect fontselect | outdent indent aligncenter alignleft alignright alignjustify lists advlist | link image hr   ",
          //paste print
          //fontselect template fullpage|wordcount ltr rtl visualchars visualblocks toc
          //spellchecker searchreplace|save preview pagebreak nonbreakings
          //|media image|outdent indent aligncenter alignleft alignright alignjustify lineheight  underline quicklink h2 h3 blockquote numlist bullist table removeformat forecolor backcolor bold italic  strikethrough hr charmap link insertdatetime|subscript superscript cut codesample code |anchor preview fullscreen|help

          // 字体
          fontsize_formats: "10px 12px 14px 16px 18px 24px 36px 48px 56px 72px",
          font_formats: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",

          // 自定义图片上传处理
          images_upload_handler: (blobInfo, success) => {
            let file = blobInfo.blob();//转化为易于理解的file象
            uploadFileAPI(file).then(result=>{
              success(this.fullUrl(result.url));
            });
          },
        },
      }
    },

    methods: {
      fullUrl(url) {
        return `${this.BaseAPI}${url}`;
      },
    },

    watch: {
      content(valueFromParent) {
        // 由父组件自动修改的内容,同步到子组件
        if (valueFromParent !== this.contentHtml) {
          this.contentHtml = valueFromParent;
        }
      },
      contentHtml(valueFromChild = "") {
        // 向父组件派发change事件
        if (valueFromChild !== this.content) {
          this.updateTimer && clearTimeout(this.updateTimer);
          this.updateTimer = setTimeout(() => {
            this.$emit("update:content", valueFromChild);
          }, 500);
        }
      },
    },

    beforeDestroy() {
      this.updateTimer && clearTimeout(this.updateTimer);
    },
  };
</script>
